<template>
  <nav class="subnav" id="subnav">
    <nav class="Categories-tab-flyout">
      <div class="Categories-flyout">
        <ul class="flyMenu">
          <li class="flyHover"
              v-for="(item,index) in TreeShapeCategories"
              :key="index"
              @mouseenter="enter(index)"
              @click="selectItem(item,index)"
              v-if="item.productCount > 0"
              :class="{ ThemeColor:index === current}">
            <div class="flyMenulink">
              <span class="flyHover-title">{{item.name}}</span>
              <span class="flyMenulink-num">{{item.productCount}}</span>
            </div>
          </li>
        </ul>
        <ul class="SecondWrap" id="SecondWrap">
          <li v-show="index === current"
              class="Second-item"
              :class="{ ThemeColor:indexSecond === SecondCurrent}"
              v-for="(itemSecond,indexSecond) in currentSecond"
              :key="indexSecond"
              v-if="itemSecond.productCount > 0"
              @mouseenter="SecondEnter(indexSecond)"
              @click="selectItemSecond(itemSecond,indexSecond)">
            <span class="Second-title">{{itemSecond.name}}</span>
            <span class="Second-num">{{itemSecond.productCount}}</span>
          </li>
        </ul>
        <ul class="Three-wrap">
        <li class="Three-item"
          v-show="indexSecond === SecondCurrent"
            v-for="(itemThree,indexThree) in currentThree"
            :key="indexThree"
            v-if="itemThree.productCount > 0"
            @click="selectItemThree(itemThree,indexThree)">
          <span class="Three-title" >{{itemThree.name}}</span>
          <span class="Three-num">{{itemThree.productCount}}</span>
        </li>
        </ul>
      </div>
    </nav>
  </nav>
</template>

<script type="text/ecmascript-6">
  import {mapMutations} from 'vuex'
  import {addClass, removeClass,hasClass} from 'common/js/dom'
  export default {
    data() {
      return {
        TreeShapeCategories:[],
        CategorieImgUrl: CategorieImgUrl,
        current:0, //一级分类默认选中
        SecondCurrent:0, //二级分类默认选中
        currentSecond: [], //选中的二级分类数据
        currentThree: [], //选中的二级分类数据
        index:0, //一级分类当前下标
        indexSecond:0, //二级分类当前下标
        name:'',
        ThreeName:'',
        OneCategories: [], //一级选中分类数据
        SecondCategory: [] //二级选中分类数据
      }
    },
    created() {
      const  _this = this
      let t1 = setInterval(() => {
        _this.TreeShapeCategories = JSON.parse(window.localStorage.getItem("TreeShapeCategories"))
        if (_this.TreeShapeCategories !== null) {
          clearInterval(t1);
          _this.currentSecond = _this.TreeShapeCategories[_this.index].children
          _this.currentThree = _this.currentSecond[_this.index].children
        }
      }, 100)
    },
    methods: {
      enter(index) {
        this.index = index
        this.current = index;
        this.currentSecond = this.TreeShapeCategories[index].children
      },
      SecondEnter(index) {
        this.indexSecond = index
        this.SecondCurrent = index;
        this.currentThree = this.currentSecond[index].children
      },
      selectItem(item, index) {
        $("#subnav").hide()
        let nameAry = item.name.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
        let name = nameAry.join('-')
        this.$router.push({
          path: `/categories/${name}`
        })
        this.setCategoryIndex(index)
        this.setFocus(1)
        this.setCategories(item)
        this.setCategoryName(item.name)
      },
      selectItemSecond(itemSecond,indexSecond) {
        $("#subnav").hide()
        this.setCategoryIndex(indexSecond)
        this.setFocus(2)
        this.setCategories(itemSecond)
        this.setSelectSecondCategory(itemSecond)
        this.setCategoryName(itemSecond.name)
        for (let i =0 ;i<this.TreeShapeCategories.length; i++) {
          this.OneCategories = []
          if( this.TreeShapeCategories[i].categoryId === itemSecond.parentId) {
            this.OneCategories.push(this.TreeShapeCategories[i])
            break
          }
        }
        this.setSelectOneCategory(this.OneCategories[0])
        let nameAry1 = this.OneCategories[0].name.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
        let name = nameAry1.join('-')
        let nameAry2 = itemSecond.name.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
        let SecondName = nameAry2.join('-')
        this.$router.push({
          path: `/categories/${name}/${SecondName}`
        })
      },
      selectItemThree(itemThree) {
        $("#subnav").hide()
        this.setFocus(3)
        this.setCategories(itemThree)
        this.setCategoryName(itemThree.name)
        this.SecondCategory = []
        this.OneCategories = []
        for (let i =0 ;i < this.TreeShapeCategories.length; i++) {
          for (let j = 0; j < this.TreeShapeCategories[i].children.length; j++) {
            if (this.TreeShapeCategories[i].children[j].categoryId === itemThree.parentId) {
              this.SecondCategory.push(this.TreeShapeCategories[i].children[j])
              break
            }
          }
          if(this.SecondCategory[0] !== undefined) {
            if (this.TreeShapeCategories[i].categoryId === this.SecondCategory[0].parentId) {
              this.OneCategories.push(this.TreeShapeCategories[i])
              break
            }
          }
        }
        this.setSelectOneCategory(this.OneCategories[0])
        this.setSelectSecondCategory(this.SecondCategory[0])
        let nameAry1 = this.OneCategories[0].name.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
        let name = nameAry1.join('-')
        let nameAry2 = this.SecondCategory[0].name.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
        let SecondName = nameAry2.join('-')
        let nameAry3 = itemThree.name.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
        let ThreeName = nameAry3.join('-')
        this.$router.push({
          path: `/categories/${name}/${SecondName}/${ThreeName}`
        })
      },
      ...mapMutations({
        setCategoryName: 'SET_CATEGORY_NAME',
        setCategoryIndex: 'SET_CATEGORY_INDEX',
        setFocus: 'SET_CATEGORY_FOCUS',
        setSelectSecondCategory: 'SET_SELECT_SECOND_CATEGORY',
        setSelectOneCategory: 'SET_SELECT_ONE_CATEGORY',
        setCategories: 'SET_CATEGORIES',
        setClass: 'SET_CATEGORIES'
      })
    },
    watch: {
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.subnav
  position: absolute;
  z-index: 9999;
  width 100%
  display none
  .Categories-tab-flyout
    position: relative;
    background: #fff;
    clear: both;
    border: 1px solid #d5d8db;
    margin: 0 auto;
    max-width: 1080px;
    width: 100%;
    .Categories-flyout
      display flex
      max-height 760px
      color: #656565;
      position: relative;
      width: 100%;
      .flyMenu
        flex 1
        border-right: 1px solid #d5d8db
        list-style: none;
        padding: 8px 10px;
        margin: 8px 0;
        width: 26%
        .flyHover
          color: #656565
          cursor pointer
          .flyMenulink
            display flex
            padding 8px 12px
            .flyHover-title
              flex 1
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding: 0 5px 0 0;
            .flyMenulink-num
              flex: 0 1 40px;
              text-align: right;
      .SecondWrap
        color: #656565
        flex 1
        margin: 8px 0;
        padding: 8px 10px;
        border-right: 1px solid #d5d8db;
        .Second-item
          display flex
          padding 8px 12px
          cursor pointer
          .Second-title
            flex 1
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 5px 0 0;
          .Second-num
            flex: 0 1 40px;
            text-align: right;
      .Three-wrap
        padding: 8px 10px;
        flex 1
        margin: 8px 0;
        color: #656565
        .Three-item
          display flex
          padding 8px 12px
          cursor pointer
          .Three-title
            flex 1
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 5px 0 0;
          .Three-num
            flex: 0 1 40px;
            text-align: right;
          .Three-title:hover
            color: #0185c6
</style>
